<template>
	<view class="zljc-container">
		<topNav
			class="home-top"
			title="查看整体扣分项 "
			:isUnderline="true"
			backgroundColor="#fe689b"
			color="#ffffff"
            :isCustomBackEvent="true"
			@backCallback="backCallback"
		></topNav>
		<view class="info-box">
			<view class="info-rows">
				<view class="info-label">发起人</view>
				<view class="info-desc">小张</view>
			</view>
			<view class="info-rows">
				<view class="info-label">日期：</view>
				<view class="info-desc">2020-12-01 11:02:01</view>
			</view>
			<view class="info-rows">
				<view class="info-label">主题：</view>
				<view class="info-desc"
					>【质量检查】
					1、护理安全管理质量检查考核表（护理部）（护理部）</view
				>
			</view>
			<view class="info-rows detail" @click="goTo">
				<view class="info-label">原始表单：</view>
				<view class="info-desc">查看</view>
			</view>
		</view>
		<view class="list-content">
			<view class="list-head">处理记录</view>
			<scroll-view
				class="list-container"
				scroll-y="true"
			>
				<view
					class="list-item"
					v-for="(item, index) in list"
					:key="index"
					@click="goTo(item)"
				>
					<view class="list-title"
						>{{ index + 1 }} {{ item.title }}</view
					>
					<view class="list-time">{{ item.time }}</view>
					<view class="list-desc">{{ item.person }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="operation-box" :style="'padding-bottom:' + bottom + 'px;'">
			<view class="submit">
				<u-button
					type="error"
					iconColor="#fe689b"
					text="提交"
					@click="goTo"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			active: 1,
			scroll: 0,
			list: [
				{
					title: "等待以下人员处理",
					time: "2020-12-01 11:02:01",
					person: "新人培训/张伟",
				},
			],
		};
	},
	mounted() {},
	methods: {
		backCallback() {
			uni.navigateTo({
				url: "/pages/index/audit/index",
			});
		},
		goTo() {
			uni.navigateTo({
				url: "/pages/index/audit/submit",
			});
		},
	},
	computed: {
		...mapState({
			listHeight: (state) => {
				return (
					state.systemInfo.screenHeight -
					(state.systemInfo.top_topNav +
						uni.upx2px(32) +
						uni.upx2px(144) +
						uni.upx2px(74))
				);
			},
			bottom: (state) => state.systemInfo.bottom,
		}),
	},
};
</script>

<style lang="scss" scoped>
.zljc-container {
	background-color: #f7f7f7;
	.tab-box {
		background-color: #ffffff;
		display: flex;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
		.tab-item {
			flex: 1;
			text-align: center;
			color: #000000;
			position: relative;
			font-size: 28rpx;
			line-height: 42rpx;
			padding: 16rpx 0;
		}
		.active {
			border-bottom: 4rpx solid #fe689b;
		}
	}

	.search-box {
		padding: 16rpx;
		.search-content {
			background-color: #ffffff;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			padding: 8rpx;
			.search-block {
				display: flex;
				.search-text {
					margin-left: 8rpx;
					font-size: 24rpx;
					color: #ababab;
				}
			}
		}
	}

	.info-box {
		background-color: #ffffff;
		color: #000000;
		height: 216rpx;
		padding: 32rpx;
		.info-rows {
			display: flex;
			position: relative;
			.info-label {
				width: 160rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				color: #ababab;
			}
			.info-desc {
				flex: 1;
				font-size: 24rpx;
				line-height: 36rpx;
				color: #000000;
			}
		}
		.info-rows + .info-rows {
			margin-top: 16rpx;
		}

		.detail::after {
			position: absolute;
			content: "";
			width: 24rpx;
			height: 28rpx;
			top: 6rpx;
			right: 0rpx;
			background-image: url("@/static/images/my/icon_jump.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
	.type-box {
		background-color: #ffffff;
		margin-top: 16rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
	}
	.list-content {
		margin-top: 32rpx;
		.list-head {
			font-size: 28rpx;
			line-height: 42rpx;
			color: #000000;
			padding: 16rpx;
		}
		.list-container {
			.list-item {
				background-color: #ffffff;
				padding: 16rpx 32rpx;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
				position: relative;

				.list-title {
					font-size: 28rpx;
					line-height: 40rpx;
					color: #000000;
				}
				.list-time {
				}
				.list-desc {
					font-size: 24rpx;
					line-height: 36rpx;
					color: gray;
					margin-top: 8rpx;
				}
			}
		}
	}
	.operation-box {
		display: flex;
		justify-content: space-between;
		position: fixed;
		width: 100vw;
		left: 0;
		bottom: 0;
		z-index: 10;
		border-top: 2rpx solid rgba(0, 0, 0, 0.1);
		.submit {
			flex: 1;
			font-size: 28rpx;
			line-height: 42rpx;
		}
		.defen {
			flex: 1;
			text-align: center;
			font-size: 42rpx;
			line-height: 80rpx;
		}
		.total {
			flex: 1;
			text-align: center;
			font-size: 42rpx;
			line-height: 80rpx;
		}
	}
}

::v-deep .submit .u-button {
	background-color: #fe689b !important;
}
</style>
